<template>
  <div>
    <el-card>
      <div class="header">
        <div>
          <el-button
            @click="drawer = true"
            type="primary"
            style="margin-left: 16px"
          >
            筛选
          </el-button>
          <el-button type="success" @click="handleInit" icon="el-icon-refresh"
          >刷新
          </el-button
          >
        </div>
        <div>
          <el-button type="primary" @click="addUser">添加客户</el-button>
        </div>
      </div>


      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 30px"
        align="center"
      >
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="电话" align="center">
        </el-table-column>
        <el-table-column prop="sid" label="客户类型" align="center">
        </el-table-column>
        <el-table-column prop="followStatus" label="跟进状态" align="center">
        </el-table-column>
        <el-table-column prop="source" label="来源" align="center">
        </el-table-column>
        <el-table-column prop="addId" label="添加人" align="center">
        </el-table-column>
        <el-table-column prop="pid" label="跟进人" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="客户性别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 0">男</span>
            <span v-else-if="scope.row.sex == 1">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="followTime" label="最新跟进时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-dropdown type="primary">
              <el-button type="primary">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.row.id)"
                  >编辑
                  </el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="success" @click="see(scope.row.id)"
                  >查看跟进
                  </el-button>
                </el-dropdown-item>
                <!-- <el-button
                  size="mini"
                  type="danger"
                  @click="Delete(scope.row.id)"
                  >删除
                </el-button> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
      <create ref="create" @Ok="handleInit"></create>
      <edit ref="edit" @Ok="handleInit"></edit>
      <list ref="list" @Ok="handleInit"></list>
    </el-card>
    <el-drawer title="客户筛选" :visible.sync="drawer" :direction="direction">
      <div class="conten">
        <div>
          <span>姓名</span>
          <el-input
            v-model="name"
            style="width: 200px; margin-right: 5px"
            placeholder="按姓名名称查询"
          ></el-input>
        </div>
        <div>
          <span>添加时间</span>
          <el-date-picker
            style="margin-right: 5px"
            v-model="dateTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div>
          <span>来源</span>
          <el-select v-model="value" placeholder="按来源筛选">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>跟进状态</span>
          <el-select v-model="value1" placeholder="跟进状态">
            <el-option
              v-for="item in genjin"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>性别</span>
          <el-select v-model="genId" placeholder="选择性别">
            <el-option
              v-for="item in Gender"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="quxiao" type="warning" style="margin-left: 16px">
          取消
        </el-button>
        <el-button @click="confirm" type="primary" style="margin-left: 16px">
          确认
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {getList, sourceList} from "@/api/toolUser";
  import {remove} from "@/api/toolUser";
  import Create from "./components/create";
  import Edit from "./components/edit";
  import List from "./components/list";

  export default {
    name: "index",
    components: {
      Create,
      Edit,
      List,
    },

    data() {
      return {
        page: 1,
        size: 10,
        total: 0,
        name: "",
        dateTime: [],
        startTime: "",
        endTime: "",
        tableData: [],
        id: "",
        type: 0,
        drawer: false,
        direction: "rtl",
        options: [],
        value: "",
        genjin: [
          {
            name: "未跟进",
            id: 0,
          },
          {
            name: "跟进中",
            id: 1,
          },
          {
            name: "已完成",
            id: 2,
          },
        ],
        value1: "",
        Gender: [
          {
            id: 0,
            name: "男",
          },
          {
            id: 1,
            name: "女",
          },
        ],
        genId: "",
      };
    },
    mounted() {
      this.handleInit();
      this.getSource();
    },
    methods: {
      handleInit() {
        if (this.dateTime !== null && this.dateTime !== "") {
          this.startTime = this.dateTime[0];
          this.endTime = this.dateTime[1];
        }
        let form = {
          type: this.type,
          page: this.page,
          size: this.size,
          name: this.name,
          startTime: this.startTime,
          endTime: this.endTime,
          fid: this.value,
          followStatus: this.value1,
          sex: this.genId,
        };
        getList(form).then((res) => {
          if (res.status === 200) {
            // console.log(res)
            this.name = "";
            this.dateTime = [];
            this.tableData = res.result.list;
            this.total = Number(res.result.total);
          }
        });
      },

      //添加客户
      addUser() {
        this.$refs["create"].show();
      },
      //删除
      Delete(id) {
        this.id = id;
        console.log(id);
        let form = {
          id: this.id,
        };
        remove(form).then((res) => {
          if (res.status == 200) {
            this.$message.success("删除成功");
            this.handleInit();
          }
        });
      },
      // 取消筛选
      quxiao() {
        var that = this;
        (that.drawer = false),
          (that.name = ""),
          (this.startTime = ""),
          (this.endTime = ""),
          (this.value = ""),
          (this.value1 = ""),
          (this.genId = "");
        that.handleInit();
      },
      // 确认筛选
      confirm() {
        var that = this;
        (that.drawer = false), that.handleInit();
      },
      // 客户数据分析
      fenxi() {
        this.$router.push("/user/analy");
      },
      //编辑
      handleEdit(e) {
        this.$refs["edit"].showOne(e);
      },
      // 跟进记录
      see(e) {
        console.log(e);
        this.$refs["list"].showOne(e);
      },
      //分页
      handleCurrentChange(val) {
        this.page = val;
        this.handleInit();
      },
      //来源数据
      getSource() {
        let form = {};
        sourceList(form).then((res) => {
          if (res.status == 200) {
            console.log(res);
            this.options = res.result;
          }
        });
      },
    },
  };
</script>

<style scoped>
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .po {
    margin-top: 200px;
  }

  .el-button {
    margin-left: 20px;
  }

  .conten {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .conten div {
    margin: 10px 0;
  }

  .conten div span {
    display: block;
  }
</style>
